@charset "utf-8";

@import "common/reset";
@import "common/common";

.loading{
    width: 100%;
    height: 100%;
    position: relative;
    .logo{
        position: absolute;
        width: 27.96875%;
        top: 15.3169%;
        left: 50%;
        transform: translateX(-50%)
    }
    .plane{
        position: absolute;
        width: 10%;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        span{
            font-size: r(18px);
            font-weight: 700;
            color: #f2999a;
        }
    }
}

.start{
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    .voice{
        position: absolute;
        width: 12.96875%;
        top: 4.577464%;
        right: 6.875%;
    }
    .stone1{
        position: absolute;
        width: 24.84375%;
        left: 22.8125%;
        top: 67.07746%;
    }
    .stone2{
        position: absolute;
        width: 33.28125%;
        left: 56.25%;
        top: 11.44366%;
    }
    .btn_start{
        position: absolute;
        width: 47.65625%;
        right: 0;
        top: 77.11267%;
    }
    .btn_rule{
        position: absolute;
        width: 47.65625%;
        right: 0;
        top: 85.56338%;
    }
    .text{
        height: 0;
        overflow: hidden;
        position: absolute;
        width: 69.0625%;
        left: 50%;
        top: 27.79929%;
        transform: translateX(-50%);
        color: #fff;
        font-size: r(20px);
        text-shadow:5px 5px 5px #a7bad3;
    }
}

.main_3{
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    img{
        position: absolute;
        width: 100%;
        height: 100%;
    }
}

// .game{
//     display: none;
//     width: 100%;
//     height: 100%;
//     position: relative;
//     img{
//         position: absolute;
//         width: 100%;
//         height: 100%;
//     }
//     .mask{
//         position: absolute;
//         width: 100%;
//         height: 100%;
//         overflow: hidden;
//         opacity: 0;
//         .mask_close{
//             position: absolute;
//             width: 35.78125%;
//             height: 6.42605%;
//             top: 75%;
//             left: 32%;
//         }
//     }
// }

.rule{
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    img{
        position: absolute;
        width: 100%;
        height: 100%;
    }
    div{
        position: absolute;
        width: r(34px);
        height: r(34px);
        border-radius: 50%;
        right: 6%;
        top: 3%;
    }
}